<template>
  <div id="app">
    <button @click="currentCom = 'ComOne'">组件1</button>
    <button @click="currentCom = 'ComTwo'">组件2</button>
    <button @click="currentCom = 'ComThree'">组件3</button>
    <!-- 展示组件 -->
    <!-- 内置组件component有一个is属性，is属性的值是谁，那谁就会被渲染到component中 -->
    <!-- 内置组件keep-alive用于缓存组件 -->
    <keep-alive>
      <!-- mode模式设置out-in表示先出后进 -->
      <!-- <transition name="run" mode="out-in">
        <component :is="currentCom"></component>
      </transition> -->

      <transition
        mode="out-in"
        enter-active-class="animate__animated animate__backInLeft"
        leave-active-class="animate__animated animate__backInRight"
      >
        <component :is="currentCom"></component>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
import ComOne from './components/ComOne.vue'
import ComTwo from './components/ComTwo.vue'
import ComThree from './components/ComThree.vue'
export default {
  name: 'App',
  data () {
    return {
      currentCom: 'ComThree'
    }
  },
  components: {
    ComOne,
    ComTwo,
    ComThree
  }
}
</script>

<style>

/* 刚开始的状态 */
.run-enter {
  transform: translateX(100%);
}
.run-enter-active {
  transition: all 2s;
}
/* 结束的状态 */
.run-enter-to {
  transform: translateX(0);
}

.run-leave {
 transform: translateX(0);
}
.run-leave-active {
  transition: all 0.3s;
}
.run-leave-to {
  transform: translateX(-100%);
}
</style>
